<template>
  <a-modal @cancel="close" title="状态变更记录" width="45vw" :visible="visible" unmount-on-close okText="关闭" @ok="close" hide-cancel>
    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData" style="max-height: 400px">
      <template #reason="{ record }">
        <div class="link" @click="openReason(record.id)">查看具体原因</div>
      </template>
    </table-index>
  </a-modal>
  <memberstatusdetail ref="statusdetail" />
</template>

<script setup name="memberStatusRecordModal">
  import memberstatusdetail from './member-status-record-detail.vue'
  import { ref } from 'vue'
  import { useTable } from '@/hooks/table'
  import { statusRecordList } from '@/api/market/member'
  const visible = ref(false)
  const memberId = ref(null)
  const statusdetail = ref(null)

  const getRecords = (memberId) => {
    const param = {
      id: Number(memberId),
      pageNumber: 1,
      pageSize: 1000,
    }
    tableCompulsory.tableLoading = true
    statusRecordList(param)
      .then((res) => {
        const result = res.result
        const data = result
        console.log('data', data)
        tableCompulsory.dataList = data
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }
  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '原因', dataIndex: 'repairNo', width: 140, slotName: 'reason' },
      { title: '操作类型', dataIndex: 'operateTypeName', width: 120 },
      { title: '操作时间', dataIndex: 'createTime', width: 180 },
      { title: '操作人', dataIndex: 'createUserName', width: 120 },
    ],
  })

  // 关闭
  const close = () => {
    visible.value = false
  }
  // 打开
  const openModal = (id) => {
    visible.value = true
    memberId.value = id
    getRecords(memberId.value)
  }

  // 查看具体原因
  const openReason = (id) => {
    statusdetail.value.openModal(id)
  }

  defineExpose({
    open,
    openModal,
  })
</script>
<style lang="less" scoped>
  .insure-card-table {
    :deep {
      .odd-tr {
        > td {
          background-color: #e5e6eb;
        }
      }
      .insure-current {
        td {
          background-color: #e7eeff;
        }
        &:hover {
          > td {
            background-color: #e7eeff !important;
          }
          .arco-table-td.arco-table-col-fixed-right::before,
          .arco-table-td.arco-table-col-fixed-left::before {
            background-color: #e7eeff !important;
          }
        }
      }
      .arco-table-tr-expand {
        background: #e5e6ebff;
        > .arco-table-td > .arco-table-cell {
          padding: 30px 221px;
        }
      }
      .arco-table-expand-btn {
        width: 20px;
        height: 20px;
        background-color: inherit;
      }
    }
  }
  .insure-card-table-border {
    :deep {
      .arco-table-border .arco-table-tr .arco-table-th {
        border-bottom: none;
      }
    }
  }
  .link {
    font-size: 14px;
    color: #165dff;
    cursor: pointer;
  }
</style>
